<template>
  <div>
    <h2>v-model的原理</h2>
    <!-- <input type="text" :value="uname" @input="onInput"> -->
    <!-- <input type="text" :value="uname" @input="uname=$event.target.value"> -->

    <!-- 综上所述：对于输入框来说 v-model 相当于 :value + @input-->

    <!-- <input type="checkbox" :checked="flag" @change="flag =$event.target.checked"> -->

      <!-- 综上所述：对于单个复选框来说 v-model 相当于 :checked + @change-->

      <!-- 使用子组件，并实现v-model的特性  -->
      <!-- <my-inout :value='uname' @input="(val) =>{uname=val}"></my-inout> -->

      <my-input v-model="uname"></my-input>
  </div>

</template>

<script>
import MyInput from './components/MyInput.vue'
export default {
  components: { MyInput },
  data() {
    return{
      uname:'zhangsan',
      flag:true
    }
  },
  // methods: {
  //   onInput (e) {
  //     this.uname=e.target.value 
  //  }
  // }
}
</script>

<style>

</style>